<template>
  <div>
    <div>
      <el-table
        :data="userData"
        height="780"
        border
        stripe
        style="width: 100%;"
      >
        <el-table-column prop="id" label="用户ID" sortable></el-table-column>
        <el-table-column prop="username" label="用户姓名"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="tel" label="联系方式"> </el-table-column>
        <el-table-column prop="password" label="密码"> </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              round
              @click="
                showUserInfo(
                  scope.row.id,
                  scope.row.username,
                  scope.row.address,
                  scope.row.tel,
                  scope.row.password
                )
              "
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-remove-outline"
              round
              @click="deleteUser(scope.row.id)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-s-management"
              round
              @click="showUserBorrowInfo(scope.row.id)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog :visible.sync="dialogVisible">
        <el-form :model="selectUser">
          <el-form-item label="用户ID:" :label-width="forLabelWidth">
            <el-input v-model="selectUser.id"></el-input
          ></el-form-item>
          <el-form-item label="用户姓名" :label-width="forLabelWidth">
            <el-input v-model="selectUser.username"></el-input
          ></el-form-item>
          <el-form-item label="地址" :label-width="forLabelWidth">
            <el-input v-model="selectUser.address"></el-input
          ></el-form-item>
          <el-form-item label="联系方式" :label-width="forLabelWidth">
            <el-input v-model="selectUser.tel"></el-input
          ></el-form-item>
          <el-form-item label="密码" :label-width="forLabelWidth">
            <el-input v-model="selectUser.password"></el-input
          ></el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer"></div>
        <el-button @click="dialogVisible = false" style="margin-left:40% ;"
          >取消</el-button
        >
        <el-button type="primary" @click="updateUserInfo()">确定</el-button>
      </el-dialog>
    </div>
    <div>
      <el-dialog :visible.sync="userBorrowVisible" style="height:990px">
        <el-table :data="userBorData" border stripe height="700px">
          <el-table-column
            prop="id"
            label="借阅记录编号"
            sortable
          ></el-table-column>
          <el-table-column prop="bookid" label="书籍编号"> </el-table-column>
          <el-table-column prop="bookname" label="书籍名称"> </el-table-column>
          <el-table-column prop="userid" label="用户编号"> </el-table-column>
          <el-table-column prop="username" label="用户名称"> </el-table-column>
          <el-table-column
            prop="lendtime"
            label="借阅时间"
            width="150px"
          ></el-table-column>
          <el-table-column
            prop="returntime"
            label="归还时间"
            width="150px"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      userData: [],
      selectUser: {
        id: '',
        username: '',
        address: '',
        tel: '0',
        password: ''
      },
      userBorrowVisible: false,
      userBorrowData: [],
      userBorData: [],
      forLabelWidth: '100px'
    }
  },
  created () {
    this.getUser()
    this.getUserBorrow()
  },
  methods: {
    showUserInfo (id, username, address, tel, password) {
      this.dialogVisible = true
      this.selectUser.id = id
      this.selectUser.username = username
      this.selectUser.address = address
      this.selectUser.tel = tel
      this.selectUser.password = password
    },
    showUserBorrowInfo (userid) {
      console.log(userid)
      this.userBorrowVisible = true
      this.$ajax({
        methods: 'get',
        url: '/borrow/findbyuser',
        params: { userid: userid }
      })
        .then(res => {
          console.log(res.data)
          this.userBorData = res.data
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getUser () {
      this.$ajax('/user/userAll')
        .then(res => {
          this.userData = res.data
          console.log(res.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getUserBorrow () {
      console.log('查看借阅记录')
      this.$ajax({
        methods: 'get',
        url: '/borrow/borrowAll'
      })
        .then(res => {
          this.userBorrowData = res.data
          console.log(res.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    updateUserInfo () {
      console.log('修改用户信息')
      this.$ajax({
        method: 'put',
        url: '/user/user',
        data: this.selectUser
      })
        .then(res => {
          console.log(res.data)
          if (res.data === true) {
            this.$message({ type: 'success', message: '修改用户信息成功' })
            this.getUser()
            this.dialogVisible = false
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    deleteUser (id) {
      this.$confirm('确定删除编号为' + id + '的用户', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log('删除用户')
          this.$ajax({
            method: 'delete',
            url: '/user/user',
            params: { id: id }
          })
            .then(res => {
              if (res.data === true) {
                this.$message({ type: 'success', message: '用户删除成功' })
                this.getUser()
              }
            })
            .catch(function (error) {
              console.log(error)
            })
        })
        .catch(() => {
          this.$message({ type: 'info', message: '取消删除' })
        })
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>
